<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="menu">
    <el-aside width="250px"> 
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#950c0c"
      router
      text-color="#fff"
      active-text-color="#ffd04b">
     <template v-for="(item, index) in menus" >
      <el-submenu :index="index+''" :key="index" v-if="!item.hidden">
        <template slot="title">
          <i :class="item.iconClass"></i>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item-group v-for="(items, i) in item.children" :key="i">
          
          <el-menu-item :index="items.path">
            <i :class="items.iconClass"></i>
          {{ items.name }}
          </el-menu-item>
          
        </el-menu-item-group>
      
      </el-submenu>
      </template>
     
    </el-menu>
    </el-aside>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        menus:[]
      }
    },
    created(){
     this.menus=this.$router.options.routes

    }
  }
</script>

<style lang="scss" scoped>
.menu{
  .el-aside{
    height: 100%;
    .el-menu{
      height: 100%;
      i{
        margin-right: 10px;
        color: azure;
      }
      .el-submenu .el-menu-item{
        min-width: 0;
      }
    }
  }
}
</style>